import React from 'react';
import Reflux from 'reflux';

//react-router;
import {Link} from 'react-router';
//differents parts;
import Store from './store.js';
import Actions from './actions.js';

//component
import {ReList, ReListItem} from '../index';
import ReTheme from '../../ReTheme';


export default class view extends React.Component {
    static propTypes = {};


    constructor(props, context) {

        super(props, context);

        //connect to reflux;
        this.actions = new Actions();
        this.store = new Store(this.actions);
        this.store.listen((data) => {
            if (this._isMounted) {

                this.setState(data);
            }
        });

        // init state;
        this.state = this.store.getState();
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this.actions.removeEvents(); //do not delete
        this._isMounted = false;
    }

    handleNestedToggle = () => {
        console.log('ddd')
    }

    render() {

        return (
            <div className="orin-ss-testnew-root-test">
                <ReTheme theme="theme-dark">
                    <ReList>
                        <ReListItem
                            titleText="测试"
                            open={false}
                            iconAlign="right"
                            key={0}
                            onNestedToggle={this.handleNestedToggle}
                        >
                            <div className="test">ssss</div>
                        </ReListItem>
                        <ReListItem
                            titleText="测试"
                            open={false}
                            iconAlign="left"
                            key={1}
                            nestedItems={
                                [
                                    <ReListItem
                                        titleText="测试"
                                        key="1.0.0"
                                        iconAlign="left"
                                        nestedItems={
                                            [<div key="1.0.0.0">wujian9</div>, <div key="1.0.0.1">wujian</div>]
                                        }
                                        onNestedToggle={this.handleNestedToggle}
                                    />,
                                    <ReListItem
                                        titleText="测试"
                                        key="1.0.1"
                                        nestedItems={
                                            [<div key="1.0.1.0">wujia</div>, <div key="1.0.1.1">wujian</div>]
                                        }
                                    />,
                                    <ReList key="1.1">
                                        <ReListItem
                                            titleText="测试"
                                            key="1.1.0"
                                            nestedItems={
                                                [<div key="1.1.0.0">wujian9</div>, <div key="1.1.0.1">wujian</div>]
                                            }
                                            onNestedToggle={this.handleNestedToggle}
                                        />
                                        <ReListItem
                                            titleText="测试"
                                            key="1.1.1"
                                            nestedItems={
                                                [<div key="1.1.1.0">wujia</div>, <div key="1.1.1.1">wujian</div>]
                                            }
                                        />
                                    </ReList>
                                ]
                            }
                        />
                    </ReList>
                </ReTheme>
            </div>
        );
    }
}
